<template>
  <!--面包屑导航区域-->
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图表管理</el-breadcrumb-item>
      <el-breadcrumb-item>图表列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
      <el-row :gutter="20">
        <!--图一-->
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <div id="pictOne" style="width: 400px;height:400px;"></div>
          </div>
        </el-col>
        <!--图二-->
        <el-col :span="9" :offset="6">
          <div class="grid-content bg-purple ">
            <div id="picTwo" style="width: 720px;height:400px;"></div>
          </div>
        </el-col>
      </el-row>
      <!--图三-->
      <div class="content">
            <div id="picThree" style="width: 500px;height:400px;"></div>
            <div id="picFour" style="width: 500px;height:400px;">4</div>
      </div>
    </el-card>
  </div>

</template>

<script>
  //1.导入echarts
  import * as echarts from 'echarts'
  import axios from 'axios'

  export default {
    name: "Manger",
    data() {
      return {}
    },
    created() {

    },
    //说明dom元素被渲染完毕了
    async mounted() {
      // 基于准备好的dom，初始化echarts实例
      var myChartOne = echarts.init(document.getElementById('pictOne'));
      var myChartTwo = echarts.init(document.getElementById('picTwo'));
      var myChartThree = echarts.init(document.getElementById('picThree'));
      var myChartFour = echarts.init(document.getElementById('picFour'));
      //获取衣服接口
      let res = await axios.get("http://localhost:3000/coatGood")
      //获取水果接口
      let fruit = await axios.get("http://localhost:3000/fruitGood")
      //获取家居接口
      let home=await axios.get("http://localhost:3000/homeGood")
      //获取护肤品接口
      let skin= await  axios.get("http://localhost:3000/skinGood")
      // console.log(fruit.data.options)
      // 指定图表的配置项和数据
        var option = {

      }
      // console.log(option)
      // 使用刚指定的配置项和数据显示图表。
      myChartOne.setOption(res.data.options);
      myChartTwo.setOption(fruit.data.options)
      myChartThree.setOption(home.data.options)
      myChartFour.setOption(skin.data.options)
    },
    methods: {}
  }
</script>

<style scoped>
  .content{
    position: relative;
  }
  #picThree{
    position: relative;
    top: 20px;
    left: -5px;
  }
#picFour{
  position: absolute;

  top: 50px;
  left: 700px;
}

</style>
